<app-toolbar>
  <app-search-form 
    (onSearch)="search($event)"></app-search-form>
  <app-batch-btn *ngIf="showAddBtn"
    uploadApi="/api/device/group/import"
    downloadApi="/api/device/group/export"
    (add)="create()"
    (batchDel)="handleBatchDel()"></app-batch-btn>
</app-toolbar>

<nz-table #basicTable [nzData]="datum" [nzFrontPagination]="false" [nzLoading]="loading" [nzTotal]="total"
  [nzPageSize]="pageSize" [nzPageIndex]="pageIndex" (nzQueryParams)="onQuery($event)">
  <thead>
    <tr>
      <th
        [nzChecked]="checked"
        [nzIndeterminate]="indeterminate"
        (nzCheckedChange)="handleAllChecked($event)"
      ></th>
      <th nzColumnKey="id" [nzSortFn]="true">ID</th>
      <th nzColumnKey="area_id" [nzSortFn]="true">区域id</th>
      <th nzColumnKey="name" [nzSortFn]="true">名称</th>
      <th nzColumnKey="desc">说明</th>
      <th nzColumnKey="created" [nzSortFn]="true">日期</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of basicTable.data; let i = index" (dblclick)="select(data.id)">
      <td
        [nzChecked]="setOfCheckedId.has(data.id)"
        (nzCheckedChange)="handleItemChecked(data.id, $event)"
      ></td>
      <td>{{data.id}}</td>
      <td>{{data.area_id}}</td>
      <td>{{data.name}}</td>
      <td>{{data.desc}}</td>
      <td>{{data.created | date}}</td>
      <td *ngIf="!ref">
        <a (click)="edit(data)">
          <i nz-icon nzType="edit"></i>
        </a>
        <nz-divider nzType="vertical"></nz-divider>
        <a nz-popconfirm nzPopconfirmTitle="确定删除?" (nzOnConfirm)="delete( data.id,0 )" (nzOnCancel)="cancel()"
          nzPopconfirmPlacement="topLeft">
          <i nz-icon nzType="delete"></i>
        </a>
      </td>
      <td *ngIf="ref">
        <a (click)="select(data.id)">
          选择
        </a>
      </td>
    </tr>
  </tbody>
</nz-table>
